<template>
    <div class="infoManage border">
        <div class="pl-3 mt-3">公告通知管理</div>
        <hr>
        <div>
            <div class="pl-3 mb-3">现有公告通知内容</div>
            <div class="d-flex border py-2" style="height: 185px;">
                <div class="w-25 overflow-auto border-right h-100">
                    <a-menu
                        mode="inline"
                    >
                        <a-menu-item key="1">
                            <a-icon type="file" />
                            <span>XXX1通知</span>
                        </a-menu-item>
                        <a-menu-item key="2">
                            <a-icon type="file" />
                            <span>XXX2通知</span>
                        </a-menu-item>
                        <a-menu-item key="3">
                            <a-icon type="file" />
                            <span>XXX3通知</span>
                        </a-menu-item>
                        <a-menu-item key="4">
                            <a-icon type="file" />
                            <span>XXX4通知</span>
                        </a-menu-item>
                        <a-menu-item key="5">
                            <a-icon type="file" />
                            <span>XXX5通知</span>
                        </a-menu-item>
                        <a-menu-item key="6">
                            <a-icon type="file" />
                            <span>XXX6通知</span>
                        </a-menu-item>
                        <a-menu-item key="7">
                            <a-icon type="file" />
                            <span>XXX7通知</span>
                        </a-menu-item>
                    </a-menu>
                </div>
                <div class="w-75 h-100 text-center" style="line-height: 185px;">
                    公告内容
                </div>
            </div>
        </div>
        <br>
        <div class="border">
            <div class="pl-3 mt-3">公告通知管理</div>
            <div class="mt-3 p-3 border">
                <div>
                    <a-input class="w-25 mr-2 mb-2"/>
                    <a-button type="primary">搜索</a-button>
                </div>
                <div>
                    <a-button type="primary" size="small">新增公告</a-button>
                    <a-button type="primary" size="small" class="mx-3">删除公告</a-button>
                    <a-button type="primary" size="small">更改公告</a-button>
                </div>
                <div style="height: 150px;line-height: 150px;" class="border mt-2 text-center">填写公告内容</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "InfoManage"
}
</script>

<style scoped>
i + span{
    vertical-align: middle;
}
</style>